<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>    
    <head>        
        <title>Edit Listing</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta name="description" content="Edit Listing" />
        
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>        
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>
        
        <script type="text/javascript" src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>
        <script type="text/javascript" src="${model.props.appPath}/js/block/jquery.blockUI.js"></script>

        <%@ include file="include/listingedit_mobile_incl.jsp" %> 
        
        <link rel="stylesheet" href="css/bootstrap/prettify.css" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap/index.css" rel="stylesheet">
        
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/bootstrap/bootstrap-wysiwyg.js"></script>
        <script src="js/bootstrap/jquery.hotkeys.js"></script>
        
        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>
        <script type="text/javascript">
            $(function() {
                $('#editor').wysiwyg();
            });            
            function submitListing() {
                var desc = $('#editor').html();
                $('#listing-description').val(desc);     
                $("form#listing-form").submit();
            }
        </script>
        
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>

        <script type="text/javascript">            
            function submitForm() {
                $.blockUI({message: "<div style='font-family: Century Gothic, Calibri, Verdana; padding: 10px;'>Uploading Photos ...</div>"});
                $("form#form-photo").submit();
            }
        </script>
        
    </head>

    <body>
        <div data-role="page" data-theme="d">

            <%@include file="header_mobile.jsp" %>
               
            <div data-role="header" data-theme="a">
                <p style="color: #fafafa; font-size: 16px; text-align: center;">Photos</p>   
            </div>
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Current Photos</p>   
            </div>
                       
            <div data-role="content" style="background-color: #ffffff">
                <c:if test="${fn:length(model.listing.photos) > 0}">
                        <c:forEach items="${model.listing.photos}" var="photo">
                            <div style="width:100%; float:left; background-color: #ececec;">
                                <table style="width: 100%">
                                    <tr>
                                        <td><img src="${model.props.rootPath}/uploads/img/001-${photo.filename}" alt="${photo.filename}" style="height:35%; width:100%; min-width: 250px;"></img></td>
                                        <td><a href="${model.props.appPath}/listing.htm?a=1002&listingID=${model.listing.id}&photoID=${photo.id}" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a></td>
                                    </tr>
                                </table>                                
                                <br>
                                <form>
                                    <input type="hidden" name="a" value="1002" />
                                    <input type="hidden" name="listingID" value="${model.listing.id}" />
                                    <input type="hidden" name="photoID" value="${photo.id}" />                                
                                </form>
                            </div>
                            <br>
                        </c:forEach>
                    </table>   
                </c:if>
                       
                        
                <c:if test="${fn:length(model.listing.photos) <= 0}">
                    <br>
                    <i>No photos yet. Use the forms below to start uploading.</i>
                    <br>
                </c:if>           
            </div>
                        
            <br>    
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 16px; text-align: center;">Add Photos</p>   
            </div>
            
            <form id="form-photo" action="listing.htm" method="post" enctype="multipart/form-data" data-ajax="false">
                
                <div data-role="content" style="background-color: #ffffff">                

                        <table cellspacing="5" cellpadding="5" border="0" style="width: 100%;">
                            <tr>
                                <td><input id="filename_1" type="file" name="filename_1" size="100" style="border: 1px solid #cacaca; width: 100%; padding: 3px;"/></td>
                            </tr>
                            <tr>
                                <td><input id="filename_2" type="file" name="filename_2" size="100" style="border: 1px solid #cacaca; width: 100%; padding: 3px;"/></td>
                            </tr>
                            <tr>
                                <td><input id="filename_3" type="file" name="filename_3" size="100" style="border: 1px solid #cacaca; width: 100%; padding: 3px;"/></td>
                            </tr>
                            <tr>
                                <td><input id="filename_4" type="file" name="filename_4" size="100" style="border: 1px solid #cacaca; width: 100%; padding: 3px;"/></td>
                            </tr>
                            <tr>
                                <td><input id="filename_5" type="file" name="filename_5" size="100" style="border: 1px solid #cacaca; width: 100%; padding: 3px;"/></td>
                            </tr>                        
                        </table>

                </div>

                <input type="hidden" name="a" value="1001" />
                <input type="hidden" name="s" value="1" />
                <input type="hidden" name="id" value="${model.listing.id}" /> 
                <a href="#" data-role="button" data-theme="a" onclick="submitForm()" style="width: 95%; margin-left: 2%;">Upload Photos</a>  
                <br>                
                <a href="#" data-role="button" data-theme="b" onclick="window.location='${model.props.appPath}/listing.htm?a=11000&id=${model.listing.id}'" style="width: 95%; margin-left: 2%;">Finish Adding Photos</a>  
                <br>
            </form> 
                                
            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>

        </div>
    </body>
</html>
